<template>
  <section class="container">
    <img src="~/assets/img/notfound.png" alt="error" class="logo" />
    <h1 class="title">
      {{ error.statusCode }}
    </h1>
    <h2 class="info">
      <p class="before">{{ error.message }}</p>
      <p class="detail">您访问页面不见了<br />返回主页试试吧</p>
    </h2>
    <nuxt-link class="button" to="/worth">
      返回首页
    </nuxt-link>
  </section>
</template>
<script>
export default {
  props: ['error']
}
</script>

<style scoped>
  .container {
    padding: 120px 0 360px;
    background: #ffffff;
  }

  .logo {
    width: 30%;
    max-width: 100%;
  }

  .title {
    display: none;
    margin-top: 15px;
    font-size: 5em;
  }

  .info {
    font-weight: 300;
    color: #9aabb1;
    margin: 0;
  }

  .before {
    display: none;
  }

  .detail {
    color: #868B90;
    font-size: 14px;
    margin-top: 20px;
  }

  .button {
    margin-top: 40px;
    padding: 10px 30px;
    border-radius: 40px;
    background: #4C87FC;
    color: #ffffff;
    border: none;
    font-size: 16px;
  }
</style>
